 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">对账文件</div>
      </div>
      <div class="content-con">
        <div class="bank-search merchant-margin">
          <Form class="search-item" :model="form">
            <FormItem class="item-padding">
              <i-input size="large" clearable v-model="form.keyword" placeholder="商户ID"></i-input>
            </FormItem>
            <FormItem class="item-padding">
              <DatePicker size="large" type="date"  v-model="form.check_date" placeholder="对账日期" style="width: 200px"></DatePicker>

            </FormItem>

            <FormItem>
              <i-button size="large" class="btn-green" @click="search">搜索</i-button>
            </FormItem>
          </Form>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page :id="pageId"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button>
          </div>
        </div>
      </div>
   </Card>

 </template>
<script>
import { getpaidcheck } from '@/api/paid'
export default {
  // name: 'merchant_statement',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: '',
      pageId: 'targetpage',
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '对账日期',
          key: 'check_date'
        },
        {
          title: '商户ID',
          key: 'uid'
        },
        {
          title: '商户名称',
          key: 'nickname'
        },
        {
          title: '创建时间',
          key: 'add_time'
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          // render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
          // }
          render: (h, params) => {
            return h('div', [
              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.paidcheck(params.row)
                    }
                  }
                },
                '下载账单'
              )
            ])
          }
        }
      ],
      foodData: [],

      form: {
        keyword: '',
        check_date: ''
      }
    }
  },
  methods: {
    getList () {
      const query = {
        keyword: this.form.keyword,
        check_date: this.form.check_date,
        pageSize: this.pageSize,
        pageCurrent: this.pageCurrent
      }
      getpaidcheck(query)
        .then(res => {
          this.foodData = res.data.data
          this.dataCount = res.data.count
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    paidcheck (row) {
      let downUrl = 'http://api.zsajc.com/api/downloadpaidcheck?uid=' + row.uid + '&check_date=' + row.check_date

      window.open(downUrl, '_blank') // 新窗口打开外链接
    },
    // 点击切换页面
    changepage (index) {
      // 储存当前页
      this.pageCurrent = index
      this.getList()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
      this.getList()
    },
    search () {
      this.getList()
    },
    // 点击确认，跳转到输入的页码
    goElevatorPage () {
      var evtObj
      var thisPage = document.getElementById(this.pageId)
      // var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
      var elevatorDiv = thisPage.getElementsByClassName('ivu-page-options-elevator')
      // 如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName('input')[0]
        if (window.KeyEvent) { // firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents')
          evtObj.initKeyEvent('keyup', true, true, window, true, false, false, false, 13, 0)
        } else { // chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents')
          evtObj.initUIEvent('keyup', true, true, window, 1)
          delete evtObj.keyCode
          if (typeof evtObj.keyCode === 'undefined') { // 为了模拟keycode
            Object.defineProperty(evtObj, 'keyCode', { value: 13 })
          } else {
            evtObj.key = String.fromCharCode(13)
          }
        }
        pageInput.dispatchEvent(evtObj)
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>
 <style lang="less" scoped="">
   .merchant-margin{
     margin-bottom: 15px;
   }
 </style>
